<script setup lang="ts">
import { ref, reactive } from "vue";
import { FormInfo, InfoContainer, FormInfoInput } from "../components";
import { formInfo } from "../components/interface";

defineOptions({
  name: "AppCollectSetting"
});
// const formInfoConfig = ref(null);
// const formProps1: formInfo = reactive({
//   title: "采集设置",
//   btnNames: [undefined, undefined, undefined],
//   btnDisabled: [false, false, false],
//   formInfoList: [
//     {
//       id: 1,
//       title: "采集设置",
//       inputType: "0",
//       placeholder: "请选择采集周期",
//       options: [
//         {
//           value: "200ms",
//           label: "200ms"
//         },

//         {
//           value: "300ms",
//           label: "300ms"
//         },

//         {
//           value: "400ms",
//           label: "400ms"
//         },

//         {
//           value: "500ms",
//           label: "500ms"
//         }
//       ]
//     },
//     {
//       id: 2,
//       title: "存储格式",
//       inputType: "0",
//       placeholder: "请输入选择存储格式",
//       options: [
//         {
//           value: "JSON",
//           label: "JSON"
//         },
//         {
//           value: "CSV",
//           label: "CSV"
//         },
//         {
//           value: "XML",
//           label: "XML"
//         }
//       ]
//     },
//     {
//       id: 3,
//       title: "保存地址",
//       inputType: "1",
//       placeholder: "请选择",
//       options: undefined
//     }
//   ]
// });
// const kafkaConfig = ref(null);
// const formInfoKafka = reactive({
//   array: [
//     {
//       id: 4,
//       title: "Bootstrap Servers",
//       inputType: "2",
//       placeholder: "请输入",
//       options: undefined
//     },
//     {
//       id: 5,
//       title: "Topic",
//       inputType: "2",
//       placeholder: "请输入",
//       options: undefined
//     }
//   ]
// });

// const clickbtn1 = () => {
//   // console.log("finish");
//   console.log(formInfoConfig.value.infoChildren[0].value);
//   console.log(formInfoConfig.value.infoChildren[1].value);
//   console.log(formInfoConfig.value.infoChildren[2].fileName);
//   console.log(kafkaConfig.value[0].inputValue);
//   console.log(kafkaConfig.value[1].inputValue);
// };
// const clickbtn2 = () => {
//   console.log("cancel");
// };
const frameSrc = "http://10.8.58.43:48080/";
</script>

<template>
  <div>
    <div class="frame">
      <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
    </div>

    <!-- <el-row class="app-cs-header">
      <FormInfo
        ref="formInfoConfig"
        :title="formProps1.title"
        :btnNames="formProps1.btnNames"
        :btnDisabled="formProps1.btnDisabled"
        :formInfoList="formProps1.formInfoList"
      >
        <template #afc1>
          <div><h4>远程Kafka服务器设置</h4></div>
          <FormInfoInput
            v-for="item in formInfoKafka.array"
            ref="kafkaConfig"
            :key="item.id"
            :title="item.title"
            :options="item.options"
            :placeholder="item.placeholder"
            :inputType="item.inputType"
          />
        </template>
      </FormInfo>
    </el-row>
    <el-row class="app-cs-footer">
      <InfoContainer title="状态栏">
        <el-row :gutter="20" justify="end">
          <el-col :span="3">
            <el-button class="app-cs-btn" type="primary" @click="clickbtn1"
              >完成</el-button
            >
          </el-col>
          <el-col :span="3">
            <el-button class="app-cs-btn" @click="clickbtn2">取消</el-button>
          </el-col>
        </el-row>
      </InfoContainer>
    </el-row> -->
  </div>
</template>

<style lang="scss" scoped>
// .app-cs-header {
//   :deep(.el-card__body) {
//     padding-right: 50% !important;
//   }
// }
// .app-cs-footer {
//   margin-top: 2vh;
//   .app-cs-btn {
//     width: 100%;
//   }
// }
.frame {
  margin-left: -20px;
  margin-top: -20px;
  width: 500px;
  height: 500px;
  background-color: aqua;
  .frame-iframe {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    border: 0;
  }
}
</style>
